<template>
<div class="journey">
    <Header/>
<div class="top">下一站去哪儿</div>
<div class="nav">
        <div class="nav_top">
            <router-link v-for="(value,index) in nav_top" :to="value.href">
                <img :src="value.img" alt="">
                <div>
                    <span>{{value.top}}</span>
                    <span>{{value.num}}</span>
                </div>
                <span>{{value.name}}</span>
                <div>
                    <i :class="value.icon"></i>
                    <span>{{value.text}}</span>
                </div>
            </router-link>
        </div>
        <div class="nav_bottom">
            <router-link v-for="(value,index) in nav_bottom" :to="value.href">
                <div>
                    <span>{{value.num}}</span>
                </div>
                <span>{{value.name}}</span>
                <span>{{value.text}}</span>
            </router-link>
        </div>
    </div>
    <!--推荐周边游-->
    <div class="recommend">
        <div>推荐周边游</div>
        <router-link to="/destination">看看周边有哪些好玩的>></router-link>
    </div>
    <!--轮播-->
    <swiper class="swi" ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(value,index) in SWiper"><router-link to=""><img :src="value.img" alt=""></router-link></swiper-slide>
    </swiper>
    <div class="nav_shop">
        <div>猜你喜欢</div>
        <div>
            <!--综合  销量 价格-->
            <router-link @click.native="ChangE(index)" :class="{color1:true,color2:index==num}" v-for="(value,index) in nav_ch"  :key="index" :to="value.href">
                <span>{{value.name}}</span>
                <div :class="{bor1:true,bor2:index==num}"></div>
            </router-link>
        </div>
        <div>
            <router-link to="">
                <i class="iconfont icon-shaixuan"></i>
                <span>筛选</span>
            </router-link>
        </div>
    </div>
    <!--商品-->
    <div class="content">
       <div v-for="(value,index) in $store.state.particulars" :key="index" class="cont">
            <router-link to="" @click.native="xiang(index)"><img :src="value.img" alt=""></router-link>
            <div>
                <p>{{value.text}}</p>
            </div>
            <div>
                <span>￥{{value.price}}起</span>
                <span>优惠价</span>
                <span>已售{{value.sales}}</span>
            </div>
        </div>
    </div>
    <Footer/>
</div>
</template>
<style scoped lang="less">
    //  初始化
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
        text-decoration: none;
    }
    .journey {
        .top {
            margin-top: 1.333rem;
            height: 1.333rem;
            font-size: 0.533rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .nav {
            width: 100%;
            display: flex;
            flex-flow: column;
            min-height: 4.398rem;
            justify-content: space-between;
            //  top 1 2 3
            > .nav_top {
                display: flex;
                height: 2.799rem;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 0.267rem;
                > a {
                    width: 32%;
                    height: 100%;
                    position: relative;
                    //  图片
                    > img {
                        width: 100%;
                        height: 100%;
                        border-radius: 0.267rem;
                    }
                    //  top
                    > div:nth-child(2) {
                        width: 30%;
                        height: 30%;
                        background-color: #ff3531;
                        color: #fff;
                        border-top-left-radius: 0.267rem;
                        border-bottom-right-radius: 0.267rem;
                        position: absolute;
                        top: 0;
                        left: 0;
                        font-size: 0.267rem;
                        display: flex;
                        flex-flow: column;
                        align-items: center;
                        font-weight: bold;
                        > span:nth-child(1) {
                            transform: scale(0.8);
                        }
                    }
                    //  描述
                    > span {
                        position: absolute;
                        color: #fff;
                        bottom: 25%;
                        left: 10%;
                        font-size: 0.48rem;
                        font-weight: bold;
                    }
                    //  音乐
                    > div:nth-child(4) {
                        display: flex;
                        position: absolute;
                        bottom: 5%;
                        left: 10%;
                        color: #fff;
                        font-size: 0.32rem;
                        > i {
                            margin-right: 0.133rem;
                        }
                    }
                }
            }
            //  1 2 3 以下
            > .nav_bottom {
                display: flex;
                flex-flow: wrap;
                align-items: center;
                justify-content: space-between;
                > a {
                    width: 32%;
                    height: 1.333rem;
                    position: relative;
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;
                    border: 0.027rem solid #ccc;
                    border-radius: 0.133rem;
                    margin-bottom: 0.267rem;
                    > div {
                        width: 15%;
                        height: 35%;
                        background-color: #ff3531;
                        color: #fff;
                        border-top-left-radius: 0.133rem;
                        border-bottom-right-radius: 0.133rem;
                        position: absolute;
                        top: 0;
                        left: 0;
                        font-size: 0.267rem;
                        display: flex;
                        flex-flow: column;
                        align-items: center;
                        font-weight: bold;
                    }
                    > span:nth-child(2) {
                        font-size: 0.373rem;
                        font-weight: bold;
                        color: #000;
                    }
                    > span {
                        font-size: 0.32rem;
                        color: #666;
                    }
                }
            }

        }
        .recommend{
            display: flex;
            justify-content: space-between;
            align-items: center;
            > div {
                font-size: 0.426rem;
                font-weight: bold;
            }
            > a {
                font-size: 0.426rem;
                color: #aaa;
            }
        }
        //  轮播
        .swi {
            height: 2.665rem;
            margin-top: 0.267rem;
            img {
                width: 100%;
                height: 100%;
            }
        }
        //  猜你喜欢
        .nav_shop {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.333rem;
            > div:nth-child(1) {
                font-size: 0.426rem;
                font-weight: bold;
            }
            > div:nth-child(2) {
                width: 55%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 0.426rem;
                //  综合 销量 价格
                > a {
                    width: 28%;
                    display: flex;
                    justify-content: space-around;
                    //  箭头
                    > div {
                        width: 0.32rem;
                        height: 0.32rem;
                        transform: rotate(135deg);
                    }
                }

            }
            //  筛选
            > div:nth-child(3) {
                font-size: 0.426rem;
                > a {
                    > i {
                        color: #00CC99;
                    }
                    > span {
                        color: #666;
                    }
                }
            }
        }
        .color1 {
            Color: #666;
        }
        .color2 {
            Color: #00CC99;
        }
        .bor1 {
            border-right: 0.053rem solid #666;
            border-top: 0.053rem solid #666;
        }
        .bor2 {
            border-right: 0.053rem solid #00CC99;
            border-top: 0.053rem solid #00CC99;
        }
        //  购物车
        .content {
            width: 100%;
            min-height: 7.996rem;
            display: flex;
            flex-flow: wrap;
            justify-content: space-between;
            margin-bottom: 1.599rem;
            > .cont {
                width: 49%;
                height: 4.797rem;
                display: flex;
                flex-flow: column;
                justify-content: space-between;
                margin-bottom: 0.267rem;
                /* 顶部图片 */
                > a {
                    > img {
                        width: 100%;
                        height: 100%;
                        border-radius: 0.267rem;
                    }
                }
                > div:nth-child(2) {
                    display: flex;
                    flex-flow: wrap;
                    font-size: 0.373rem;
                    font-weight: bold;
                    color: #000;
                    > p {
                        text-align: left;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                }
                > div:nth-child(3) {
                    width: 100%;
                    height: 0.8rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 0.453rem;
                    > span:nth-child(1) {
                        color: red;
                    }
                    > span:nth-child(2) {
                        margin-right: 0.133rem;
                        padding: 0.107rem 0.133rem;
                        border-radius: 0.533rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #CCFFEB;
                        color: #00CC99;
                    }
                    > span:nth-child(3){
                    font-size: 0.373rem;
                    }
                }

            }
        }
    }
</style>
<script>
    //  点击切换综合·销量·价格
    function compare1(prop) {
        return function (a,b) {
            var val1=a[prop];
            var val2=b[prop];
            return val1 - val2;
        }
    }
    function compare2(prop) {
        return function (a,b) {
            var val1=a[prop];
            var val2=b[prop];
            return val2 - val1;
        }
    }
    //  引入公共头部尾部组件
    import Header from '@/components/header.vue'
    import Footer from '@/components/footer.vue'
    export default {
        data(){
            return {
                //  top 1 2 3
                nav_top:[],
                // top 以下
                nav_bottom:[],
                //  轮播
                SWiper:[],
                swiperOptions: {autoplay: true, loop: true},   //循环播放
                //  综合  销量  价格
                nav_ch:[],
                //
                num:0,
            }
        },
        components: {
            Header,
            Footer
        },
        methods:{
            //  点击改变销量  价格  综合
            ChangE(index){
              this.num=index;
              if (this.num==0) {
                  this.$store.state.particulars=this.$store.state.particulars.sort(compare1("id"))
              }else if (this.num==1){
                  this.$store.state.particulars=this.$store.state.particulars.sort(compare2("sales"))
              }else if (this.num==2){
                  this.$store.state.particulars=this.$store.state.particulars.sort(compare1("price"))
              }
            },
            //  点击进入详情页
            xiang(index){
              this.$store.commit('xiang',index);
              this.$router.push('/details');
            }

        },
        mounted(){
            this.$axios.get('http://118.178.85.166:3000/shopping').then((data)=>{
                //  全部数据
                let Data=data.data[0];
                //  综合  销量  价格
                this.nav_ch=JSON.parse(Data.nav_ch);
                //  轮播
                this.SWiper=JSON.parse(Data.SWiper);
                //  top 以下
                this.nav_bottom=JSON.parse(Data.nav_bottom);
                //  top  1 2 3
                this.nav_top=JSON.parse(Data.nav_top);
                //  商品数据
                this.$store.state.particulars=JSON.parse(Data.particulars);
            }).catch((err)=>{
                console.log('这是journey.vue中的错误:'+err);
            });
        }
    }

</script>
